<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/timeline_v2.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:47 GMT -->
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Family账本 - ${username }</title>

<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

	<link rel="shortcut icon" href="${path }/static/img/账本logo.png">
	<link href="${path }/static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<!-- <link href="${path }/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> -->
	<link href="${path }/static/css/font-awesome.min.css" rel="stylesheet">
	<link href="${path }/static/css/font-awesome.css" rel="stylesheet">
	<link href="${path }/static/css/animate.min.css" rel="stylesheet">
	<link href="${path }/static/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="${path }/static/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	
	
	
	
	
</head>

<body class="gray-bg">
	
	<div class="row">
		<div class="col-sm-12">
			<div class="wrapper wrapper-content">
				<div class="row animated fadeInRight">
					<div class="col-sm-12">
						
						<div class="ibox float-e-margins">
							
							<div class="" id="ibox-content">

								<div id="vertical-timeline" class="vertical-container light-timeline">
									
									<div class="vertical-timeline-block" style="max-width: 900px;">						
										
										<div class="col-sm-7" style="margin-left: 45px; max-width: 800px;">
											<div class="input-group">
												<a href="${path }/ToFamily"><button class="btn" style="color: #696969 ;">家庭管理</button></a>
												<button data-toggle="dropdown" class="btn dropdown-toggle">
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu">
													<li><a href="${path }/ToIndex">收支管理</a></li>
													<li><a href="${path }/DoCharts?year=2017&month=00">账本统计</a></li>
													<li><a href="${path }/ToUpdateMember?name=${name }&username=${username }&password=${password }&member_id=${member_id}&family_id=${family_id}&jump=/ToFamilyMember">个人信息</a></li>
													<li><a href="${path }/ToFamilyMember">家庭成员管理</a></li>
													<li class="divider"></li>
													<li><a href="${path }/ToLogin">退出</a></li>
												</ul>
											</div>
										</div>
										
										<div class="col-sm-4" style="max-width: 350px;">
											<form action="${path }/DoSearchFamliy">
												<div class="input-group">
													<input required type="text" name="text" placeholder="" value="${text }" class="input-sm form-control">
													<span class="input-group-btn"><button type="submit" class="btn btn-sm btn-primary">搜索</button> </span>
												</div>
											</form>
										</div>
										<div class="col-sm-1"></div>
									</div>
									
									<div class="vertical-timeline-block" style="max-width: 900px;">
										<div class="vertical-timeline-icon blue-bg">
											<i class="fa fa-user"></i>
										</div>

										<div class="vertical-timeline-content">
											<h1 align="center" style="color: #3EC9AA;">家庭管理</h1>
											<h2 style="color: #BD10E0;">家庭数：&nbsp;${familyNum }&nbsp;户</h2>
											<h2 style="color: #F5A623;">家庭名：&nbsp;<c:forEach items="${AllList }" var = "u">${u.name }&nbsp;&nbsp;</c:forEach> </h2>
											<form method="post" action="${path }/DoAddFamily?text=${text}&jump=/ToFamily">
												<button style="margin-right: 15px; height: 34px;" class="btn btn-sm btn-success" type="submit">添加家庭</button>
												<span class="vertical-date"><small style="font-size: 16px;" >${date}</small></span>
												<input required id = "family_name" name="family_name" style="width: 250px; margin-left: 478px;" class="form-control" type="text" size="20" />
											</form>
										</div>
									</div>
									
									<c:forEach items="${list }" var="a">
										<div class="vertical-timeline-block" style="max-width: 900px;">
											<div class="vertical-timeline-icon yellow-bg">
												<i class="fa fa-user"></i>
											</div>
	
											<div class="vertical-timeline-content">
												<span class="vertical-date" style="font-size: 18px;">  <input required id = "${a.name }Text" name="${a.name }" readonly value="${a.name }" style="background: white; border: none;" class="form-control" type="text" size="20" /></span>
												<a href="${path }/DoDeleteFamily?id=${a.id}&text=${text}" style="margin-left: 5px" class="btn btn-sm btn-danger btn-primary">删除</a>
												<a id = "${a.name }Btn" class="btn btn-sm btn-primary" onclick="var family = '${a.name}'; doUpdateFamily(family)" >编辑</a>
											</div>
										</div>
									</c:forEach>
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">	
		//提示信息框，右上
		var msg = '${msg}';
		var msg1 = '${msg1}';
		if(msg == "注册成功" || msg == "添加成功" || msg == "删除成功" || msg1 == "搜索成功" || msg == "编辑成功" || msg == "用户信息修改成功") {
			$(function() {
            	toastr.success(msg, "success"); // Wire up an event handler to a button in the toast, if it exists
            })
		}else if(msg == "注册失败" || msg == "添加失败" || msg == "删除失败" || msg == "搜索失败" || msg == "编辑失败" || msg == "用户信息修改失败") {
			$(function() {
            	toastr.error(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
            })
		}else if(msg == "该家庭已存在" || msg == "该用户已存在") {
			$(function() {
            	toastr.warning(msg, "error"); // Wire up an event handler to a button in the toast, if it exists
            })
		}
		
		function doUpdateFamily(family) {
			var name = document.getElementById(family+"Text");
			var updateText = document.getElementById(family+"Btn").innerHTML;
			if(updateText == "编辑") {
				document.getElementById(family+"Btn").innerHTML = "完成";
				name.style.border = "";
				name.removeAttribute("readonly");
				//document.getElementById("name").removeAttribute = "readonly";
			}else if(updateText == "完成") {
				document.getElementById(family+"Btn").innerHTML = "编辑";
				name.style.border = "0";
				name.setAttribute("readonly", "readonly");
				if(name.value == family || name.value == "") {
					name.value = family;
				}else {
					window.location.href="${path}/DoUpdateFamily?family_name="+family+"&updateName="+name.value+"&text=${text}";
				}
			}
		}
		
	</script>
	
	<script src="${path }/static/js/jquery.min.js?v=2.1.4"></script>
	<!-- <script src="${path }/static/js/bootstrap.min.js?v=3.3.6"></script> -->
	<!-- <script src="${path }/static/js/content.min.js?v=1.0.0"></script> -->
    <script src="${path }/static/js/bootstrap.min.js"></script>
    <script src="${path }/static/js/plugins/toastr/toastr.min.js"></script>
	<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>


<!-- Mirrored from www.zi-han.net/theme/hplus/timeline_v2.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:47 GMT -->
</html>
